<template>
	<view class="member-type">
		<view class="header">
			<text class="title">会员等级</text>
		</view>
		
		<view class="current-level">
			<view class="level-card">
				<view class="level-icon">👑</view>
				<view class="level-info">
					<text class="level-name">{{ currentLevel.name }}</text>
					<text class="level-desc">{{ currentLevel.description }}</text>
				</view>
				<view class="level-progress">
					<text class="progress-text">成长值 {{ currentLevel.currentExp }}/{{ currentLevel.nextLevelExp }}</text>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="level-list">
			<view 
				v-for="level in memberLevels" 
				:key="level.id"
				class="level-item"
				:class="{ active: level.id === currentLevel.id, locked: level.id > currentLevel.id }"
			>
				<view class="level-header">
					<view class="level-badge">
						<text class="badge-icon">{{ level.icon }}</text>
						<text class="badge-name">{{ level.name }}</text>
					</view>
					<text class="level-required">需要 {{ level.requiredExp }} 成长值</text>
				</view>
				<view class="level-benefits">
					<text class="benefits-title">会员权益：</text>
					<view class="benefits-list">
						<text v-for="benefit in level.benefits" :key="benefit" class="benefit-item">• {{ benefit }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentLevel = ref({
	id: 2,
	name: '黄金会员',
	description: '享受更多专属优惠',
	currentExp: 1500,
	nextLevelExp: 3000
})

const memberLevels = ref([
	{
		id: 1,
		name: '普通会员',
		icon: '⭐',
		requiredExp: 0,
		benefits: ['新人专享优惠', '基础积分奖励']
	},
	{
		id: 2,
		name: '黄金会员',
		icon: '👑',
		requiredExp: 1000,
		benefits: ['9折优惠', '双倍积分', '专属客服', '生日特权']
	},
	{
		id: 3,
		name: '铂金会员',
		icon: '💎',
		requiredExp: 3000,
		benefits: ['8.5折优惠', '三倍积分', '优先配送', '新品体验']
	},
	{
		id: 4,
		name: '钻石会员',
		icon: '✨',
		requiredExp: 6000,
		benefits: ['8折优惠', '四倍积分', '专属礼品', 'VIP通道']
	}
])

const progressPercent = computed(() => {
	return (currentLevel.value.currentExp / currentLevel.value.nextLevelExp) * 100
})
</script>

<style scoped>
.member-type {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	text-align: center;
	padding: 30rpx 0;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.current-level {
	margin-bottom: 30rpx;
}

.level-card {
	background: linear-gradient(135deg, #ffd700, #ffed4e);
	border-radius: 20rpx;
	padding: 40rpx;
	color: #8b6914;
}

.level-icon {
	font-size: 80rpx;
	text-align: center;
	margin-bottom: 20rpx;
}

.level-info {
	text-align: center;
	margin-bottom: 30rpx;
}

.level-name {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.level-desc {
	font-size: 24rpx;
	opacity: 0.8;
}

.level-progress {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 20rpx;
	padding: 20rpx;
}

.progress-text {
	font-size: 24rpx;
	margin-bottom: 15rpx;
	display: block;
}

.progress-bar {
	background: rgba(139, 105, 20, 0.3);
	height: 12rpx;
	border-radius: 6rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: #8b6914;
	transition: width 0.3s;
}

.level-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.level-item {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	border: 2rpx solid #eee;
}

.level-item.active {
	border-color: #ffd700;
	background: #fffdf0;
}

.level-item.locked {
	opacity: 0.6;
}

.level-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.level-badge {
	display: flex;
	align-items: center;
	gap: 15rpx;
}

.badge-icon {
	font-size: 40rpx;
}

.badge-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.level-required {
	font-size: 22rpx;
	color: #999;
}

.benefits-title {
	font-size: 24rpx;
	font-weight: bold;
	color: #666;
	margin-bottom: 15rpx;
	display: block;
}

.benefits-list {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.benefit-item {
	font-size: 22rpx;
	color: #666;
	line-height: 1.4;
}
</style>